<template>
	<view class="container bg-white">
		<view class="card">
			<!-- 左侧头像区域 -->
			<view class="avatar-container">
				<image :src="avatarUrl" style="height: 100%;"  mode="aspectFill"></image>
			</view>

			<!-- 右侧信息区域 -->
			<view class="info-container">
				<view class="info-item" style="margin-left: 200rpx;">
					<u-text size="17" lines="1" bold :text="cardInfo.companyName"></u-text>
				</view>
				<view class="info-item" style="margin-left: 190rpx;">
					<u-text size="16" lines="1" :text="cardInfo.position"></u-text>
				</view>
				<view>
					<view class="info-divider" style="margin-left: 180rpx;"></view>
				</view>
				<view class="info-item name" style="margin-left: 170rpx;">
					<u-text size="17" lines="1" bold :text="cardInfo.name"></u-text>
				</view>
				<view class="info-item phone" style="margin-left: 160rpx;">
					<u-icon name="phone" size="16" color="#666"></u-icon>
					<u-text size="15" lines="1" color="#666" :text="cardInfo.mobile"></u-text>
				</view>
				<view class="info-item email" style="margin-left: 150rpx;">
					<u-icon v-if="cardInfo.email" name="email" size="16" color="#666"></u-icon>
					<u-text size="15" lines="1" color="#666" :text="cardInfo.email"></u-text>
				</view>
				<view class="info-item address" style="margin-left:	100rpx;">
					<u-icon v-if="cardInfo.companyAddress" name="map" size="16" color="#666"></u-icon>
					<u-text size="15" lines="1" color="#666" :text="cardInfo.companyAddress"></u-text>
				</view>
			</view>
		</view>
		<view style="width: 500rpx;margin-top: 50rpx;">
			<u-button v-if="videoData && videoData.createStatus && videoData.createStatus === 'DONE'" openType="share"
				text="发名片" icon="share" type="primary" shape="circle">
			</u-button>
			<u-button v-else @click="sendCardBtnClick" text="发名片" icon="share" type="primary" shape="circle">
			</u-button>
		</view>
		<view style="width: 710rpx;height: 710rpx;margin-top: 50rpx;">
			<u-grid @click="menuClick" :border="false">
				<u-grid-item v-for="(baseListItem,baseListIndex) in baseList" :key="baseListIndex">
					<view class="menu-img flex justify-center flex-flow align-center">
						<view class="menu-img-bgc mb-15 flex align-center justify-center"
							:style="'background-image: url(' + baseListItem.backgroudImg + ');'">
							<view :class="baseListItem.name" class="iconfont menu-img-icon"></view>
						</view>
						{{baseListItem.title}}
					</view>
				</u-grid-item>
			</u-grid>
		</view>
		<!-- 名片码弹窗 -->
		<u-popup 
		  :show="showQrcode" 
		  mode="center" 
		  border-radius="20"
		>
		  <view class="qrcode-popup">
				<view class="popup-header">
				  <text class="title">名片码</text>
				  <u-icon name="close" @click="showQrcode = false"></u-icon>
				</view>
				<image v-loading="qrcodeLoading" :src="qrcode" style="height: 80vw;width:80vw"  mode="aspectFill"></image>
		  </view>
		</u-popup>
		<u-toast ref="toast"></u-toast>
	</view>
</template>

<script>
	import api from "@/api/api";
	export default {
		data() {
			return {
				avatarUrl: null,
				videoData: {},
				cardInfo: {
					companyName: "",
					name: "",
					position: "",
					mobile: "",
					email: "",
					companyAddress: ""
				},
				baseList: [{
						name: 'icon-a-shuziren1',
						backgroudImg: "https://biz-miniapp.oss-cn-beijing.aliyuncs.com/newVersionImg/holdAll1.png",
						title: '我的数字人',
						page: "/pages/aiPerson/aiPersonList"
					},
					{
						name: 'icon-xiaochengxuerweima',
						backgroudImg: "https://biz-miniapp.oss-cn-beijing.aliyuncs.com/newVersionImg/holdAll2.png",
						title: '名片码',
						key: "qrcode"
					},
					{
						name: 'icon-xingxiangsheji',
						backgroudImg: "https://biz-miniapp.oss-cn-beijing.aliyuncs.com/newVersionImg/holdAll3.png",
						title: '我的形象',
						page: "/pages/aiPerson/aiFigure"
					},
					{
						name: 'icon-shezhi',
						backgroudImg: "https://biz-miniapp.oss-cn-beijing.aliyuncs.com/newVersionImg/holdAll4.png",
						title: 'AI设置',
						page: "/pages/aiSetting/index"
					},
					{
						name: 'icon-bianjimingpian',
						backgroudImg: "https://biz-miniapp.oss-cn-beijing.aliyuncs.com/newVersionImg/holdAll5.png",
						title: '编辑名片',
						page: "/pages/card/edit"
					},
					{
						name: 'icon-kefu',
						backgroudImg: "https://biz-miniapp.oss-cn-beijing.aliyuncs.com/newVersionImg/holdAll6.png",
						title: '霄客客服',
						page: "/pages/aiChat/sysChat"
					},
					{
						name: 'icon-chanpinguanli',
						backgroudImg: "https://biz-miniapp.oss-cn-beijing.aliyuncs.com/newVersionImg/holdAll7.png",
						title: '产品管理',
						page: "/pages/product/list"
					},
				],
				showQrcode: false,
				qrcode: null,
				qrcodeLoading: false
			}
		},
		onLoad() {
			this.loadAiVideo();
			this.loadCardInfo();

			uni.$on('setDefaultAiVideoSuccess', (aiVideoId) => {
				this.loadAiVideo();
			})
			uni.$on('saveCardInfoSuccess', (aiVideoId) => {
				this.loadCardInfo();
			})
		},
		methods: {
			loadAiVideo() {
				try {
					this.depot.get(api.aiCard("aiVideo/findDefaultAiVideo"))
						.then((res) => {
							console.log("res", res)
							if (res && res.data && res.data.data) {
								this.videoData = res.data.data;
								this.avatarUrl = this.videoData.videoUrl ? this.videoData.videoUrl +
									"?x-oss-process=video/snapshot,t_0,f_jpg,w_200,h_200,m_fast" : this.videoData
									.srcImgUrl + "?x-oss-process=image/resize,w_200,h_200";
							} else {
								throw new Error("数字人信息加载失败")
							}
						})
				} catch (e) {
					this.$refs.toast.show({
						type: "error",
						title: "提示",
						message: "数字人信息加载失败"
					});
				}
			},
			loadCardInfo() {
				this.depot.get(api.aiCard("cardInfo/findCardInfo"))
					.then(res => {
						if (res && res.data && res.data.data) {
							this.cardInfo = res.data.data;
						}
					})
			},
			menuClick(menuIndex) {
				let menu = this.baseList[menuIndex];
				if (menu) {
					if (menu.page) {
						uni.navigateTo({
							url: menu.page
						})
					} else if (menu.key && menu.key=="qrcode") {
						this.loadQrcode();
						this.showQrcode = true;
					}
				}
			},
			onShareAppMessage(res) {
				if (res.from === 'button') {
					// 来自页面内转发按钮
					console.log(res.target)
				}
				let shareUrl = this.videoData.videoUrl ? this.videoData.videoUrl +
					"?x-oss-process=video/snapshot,t_0,f_jpg,w_800,h_800,m_fast" : this.videoData.srcImgUrl +
					"?x-oss-process=image/resize,w_800,h_800,m_fast";
				let title = this.cardInfo && this.cardInfo.name ? this.cardInfo.name + '的数字人名片': '数字人名片';
				return {
					title: title,
					path: '/pages/card/index?wechatUserId=' + this.videoData.wechatUserId,
					imageUrl: shareUrl,
					success(res) {
						console.log('分享成功', res)
					},
					fail(err) {
						console.log('分享失败', err)
					}
				}
			},
			sendCardBtnClick() {
				this.$refs.toast.show({
					type: "error",
					title: "提示",
					message: "您的数字人还在生成中，暂无法分享"
				});
				this.loadAiVideo();
			},
			loadQrcode() {
				this.qrcodeLoading = true;
				const accountInfo = uni.getAccountInfoSync();
				
				this.depot.get(api.wechat("user/getCardQrCode?cardId=" + this.videoData.wechatUserId + "&appId=" + accountInfo.miniProgram.appId + "&pageUrl=" + "pages/card/index"))
					.then(res => {
						if (res && res.data && res.data.data) {
							this.qrcode = res.data.data;
							this.qrcodeLoading = false;
						}
					})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		display: flex;
		flex-direction: column;
		justify-content: start;
		align-items: center;
		padding-top: 10rpx;
		height: 100vh;
		background-color: #fff;
	}

	.card {
		width: 98%;
		height: 0;
		padding-bottom: 380rpx;
		/* 90% * 3/4 = 67.5% */
		background-color: #fff;
		border-radius: 10px;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
		position: relative;
		overflow: hidden;
	}

	.avatar-container {
		position: absolute;
		left: 0;
		top: 0;
		width: 50%;
		/* 初始设置为50% */
		height: 100%;
		background-color: #f0f0f0;
		clip-path: polygon(0 0, 100% 0, 70% 100%, 0 100%);
	}

	.info-container {
		position: absolute;
		right: 0;
		top: 0;
		width: 80%;
		/* 比头像区域宽一些 */
		height: 100%;
		padding: 20rpx 30rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		clip-path: polygon(25% 0, 100% 0, 100% 100%, 0 100%);
	}

	.info-item {
		margin: 6rpx 0;
		display: flex;
		align-items: center;
	}

	// .company {
	// 	font-size: 32rpx;
	// 	font-weight: bold;
	// 	color: #333;
	// 	white-space: nowrap;
	// 	text-overflow: ellipsis;
	// }

	.position {
		font-size: 28rpx;
		color: #666;
	}

	.info-divider {
		height: 4rpx;
		background-color: #2979ff;
		// margin: 15rpx 0;
	}

	.name {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}

	.phone,
	.email,
	.address {
		font-size: 26rpx;
		color: #666;

		.u-icon {
			margin-right: 10rpx;
		}
	}

	.menu {
		&-img {
			color: #666666;
			font-size: 28rpx;
			width: 160rpx;
			height: 237rpx;
			// margin: 20rpx 80rpx 30rpx 10rpx;
			word-break: keep-all;
			white-space: nowrap;

			&:nth-child(3n) {
				margin-right: 0;
			}

			&-bgc {
				width: 100rpx;
				height: 100rpx;
				background-repeat: no-repeat;
				background-size: 100% 100%;
				position: relative;

				&-tips {
					padding: 0 12rpx;
					line-height: 28rpx;
					border-radius: 8rpx;
					background-color: #e60012;
					position: absolute;
					font-size: 20rpx;
					top: 0;
					right: -24rpx;
					color: #fff;
				}
			}

			&-icon {
				color: #fff;
				font-size: 58rpx;
			}
		}
	}
	
	
	.qrcode-popup {
	  padding: 40rpx;
	  
	  .popup-header {
	    display: flex;
	    justify-content: space-between;
	    align-items: center;
	    margin-bottom: 40rpx;
	    
	    .title {
	      font-size: 36rpx;
	      font-weight: bold;
	      color: #333;
	    }
	    
	    .u-icon {
	      color: #999;
	    }
	  }
	  
	  .duration-item {
	    display: flex;
	    justify-content: space-between;
	    align-items: center;
	    padding: 30rpx 20rpx;
	    border-bottom: 1rpx solid #f1f1f1;
	    
	    .price {
	      color: #fa3534;
	      font-weight: bold;
	    }
	  }
	  
	  .total-price {
	    text-align: right;
	    font-size: 32rpx;
	    margin: 40rpx 0;
	    
	    .price {
	      color: #fa3534;
	      font-size: 40rpx;
	      font-weight: bold;
	    }
	  }
	  
	  .u-btn {
	    margin-top: 20rpx;
	  }
	}
</style>